//页面加载完成
$(function () {
    //    执行事件
    page=1;
    word="蛋";
    //添加tab栏点击事件
    $(".tab li").click(function () {
        $(".container").html("");
        switch ($(this).index()) {
            case 0:
                word = "蛋";
                break;
            case 1:
                word = "黄瓜";
                break;
            case 2:
                word = "茄子";
                break;
            case 3: 
                word = "鸡蛋";
                break;
            case 4: 
                word = "蛋糕";
                break;
        }
        getdata(word);
    });

    //搜索框
    $(function(){
       $(".select").click(function(){
        window.open("select.html");
       })
    });
    //实现新闻滚到到最后一条的时候加载下一页新闻的功能
    $(window).scroll(function () {
        console.log($(document).scrollTop())
        // 当滚动条上方的高度大于等于页面内容的高度的时候 就代表页面滚动到底部了
        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
            console.log("到底部了");
            page++;
            getdata();
        }
    });
})

function getdata(){
    $.ajax({
        url: "http://api.tianapi.com/caipu/index?key=08b44ac28792327bd267e27f49c03e1d&page="+page+"&word="+word, // 请求路径
        type: "GET", //请求方式
        //请求成功之后的回调
        success: function (data) {
            //定义一个变量保存需要拼接的html代码
            var html = "";
            // 遍历数据列表 把每项新闻数据组装成html代码
            $.each(data.newslist, function (index, item) {
                //通过${}把js的变量跟html代码拼接在一起
                html += `
                    <div class="card" >
                        <div class="box">
                        <h1>${item.cp_name}</h1>
                        <h2>做法如下</h2>
                            <h3>${item.zuofa}</h3>
                            <div class="sourse-content">
                                <h2>调料：${item.tiaoliao}</h2>
                                <h2>原料${item.yuanliao}</h2>
                            </div>
                        </div>
                    </div>
                    `
            })
            //最终把新闻列表的内容追加到新闻容器上
            $(".container").append(html)

        },//响应成功后的回调函数
        //表示如果请求响应出现错误，会执行的回调函数
        error: function () {
            alert("出错啦...")
        },
        dataType: "json"//设置接受到的响应数据的格式 text 普通的文本字符串
    });
}